<script setup lang="ts">

import { ref, type PropType } from 'vue'
// import useWebsiteStore from '@/stores/modules/website.ts'
// const useWebsite = useWebsiteStore()
import useWebsiteStore from '@/stores/modules/website'

const websiteStore = useWebsiteStore()
const animationClass = ref('')

function handleMouseEnter() {
  animationClass.value = 'spin-forward'
}

function handleMouseLeave() {
  animationClass.value = 'spin-backward'
}
</script>
<template>
  <div
    v-slide-in
    class="relative w-full max-w-md mx-auto px-6 py-8 rounded-2xl shadow-md overflow-hidden transition-all duration-300 transform bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-100 hover:-translate-y-1.5 hover:shadow-xl hover:bg-gradient-to-r hover:from-blue-100 hover:to-purple-100 dark:hover:from-gray-700 dark:hover:to-gray-600"
  >
    <!-- 背景图 -->
    <div class="absolute top-0 left-0 w-full h-64 overflow-hidden">
      <div
        class="w-full h-full bg-cover bg-center filter brightness-[.55] contrast-[.95] saturate-[.95] blur-[2px] transition-all duration-500"
        :style="`background-image: url(${websiteStore.webInfo?.bgImage})`"
      ></div>
      <div
        class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-b from-transparent to-white dark:to-gray-900"
      ></div>
    </div>

    <!-- 内容 -->
    <div class="relative z-10 flex flex-col items-center mt-8">
      <!-- 头像 -->
      <div class="mb-4">
        <div
          class="w-25 h-25 rounded-full shadow-md cursor-pointer"
          :class="animationClass"
          @mouseenter="handleMouseEnter"
          @mouseleave="handleMouseLeave"
        >
          <el-avatar
            size="100"
            :src="websiteStore.webInfo?.avatar"
            class="w-25 h-25 rounded-full border-4 border-white dark:border-gray-800"
          />
        </div>
      </div>

      <!-- 昵称 + 装饰 -->
      <div
        class="flex flex-col items-center text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100"
      >
        <div>{{ websiteStore.webInfo?.nickname }}</div>
        <div class="flex justify-center items-center mt-1 space-x-2">
          <span class="block w-10 h-0.5 bg-blue-500 rounded"></span>
          <span class="block w-2.5 h-2.5 bg-blue-500 rounded-full"></span>
          <span class="block w-10 h-0.5 bg-blue-500 rounded"></span>
        </div>
      </div>

      <!-- 个性签名 -->
      <div class="text-sm text-gray-600 dark:text-gray-400 mb-5">
        <el-tooltip :content="websiteStore.webInfo?.motto" placement="bottom" :show-after="500">
          <span class="cursor-default select-none">
            {{ websiteStore.webInfo?.motto }}
          </span>
        </el-tooltip>
      </div>

      <!-- 数据统计 -->
      <div class="flex justify-center items-center space-x-6 text-center mb-6">
        <div>
          <div class="text-xl font-semibold text-blue-500 dark:text-blue-400">
            {{ websiteStore.webInfo?.articleCount }}
          </div>
          <div class="text-sm text-gray-600 dark:text-gray-400">文章数</div>
        </div>
        <div class="w-px h-8 bg-gray-300 dark:bg-gray-700"></div>
        <div>
          <div class="text-xl font-semibold text-blue-500 dark:text-blue-400">
            {{ websiteStore.webInfo?.categoryCount }}
          </div>
          <div class="text-sm text-gray-600 dark:text-gray-400">分类数</div>
        </div>
        <div class="w-px h-8 bg-gray-300 dark:bg-gray-700"></div>
        <div>
          <div class="text-xl font-semibold text-blue-500 dark:text-blue-400">
            {{ websiteStore.webInfo?.tagCount }}
          </div>
          <div class="text-sm text-gray-600 dark:text-gray-400">标签数</div>
        </div>
      </div>

      <!-- 社交图标 -->
      <div class="flex items-center space-x-6">
    <a
      :href="websiteStore.webInfo?.githubUrl"
      target="_blank"
      rel="noopener noreferrer"
      class="icon-wrapper"
    >
      <Icon name="github" width="32" height="32" />
    </a>
    <a
      :href="websiteStore.webInfo?.giteeUrl"
      target="_blank"
      rel="noopener noreferrer"
      class="icon-wrapper"
    >
      <Icon name="gitee" width="32" height="32" />
    </a>
  </div>
    </div>
  </div>
</template>
<style scoped>
@keyframes spin-forward {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-backward {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.spin-forward {
  animation: spin-forward 0.4s linear forwards;
}

.spin-backward {
  animation: spin-backward 0.4s linear forwards;
}

/* Tailwind中w-25和h-25不是默认类，改为自定义尺寸 */
.w-25 {
  width: 100px;
}
.h-25 {
  height: 100px;
}
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
  &:hover {
    transform: scale(1.25);
  }
}
</style>
